<template>
    <div class="app-mob-vant-color-picker">
        <div>
            <div v-if="!disabled" ref="colorPicker" class="app-mob-vant-color-picker__color" @click="openColorPicker">
                <div class="app-mob-vant-color-picker__backg" :style="'background-color:'+state.color+';'">
                    <span class="app-mob-vant-color-picker__backg-icon" :style="`color: ${state.styleColor};`">                    
                        <van-icon :name="state.vanIconName" />
                    </span>
                </div>
            </div>
            <div v-else class="app-mob-vant-color-picker__dislbed">
                <div class="app-mob-vant-color-picker__backg">
                    <span class="app-mob-vant-color-picker__backg-icon">                    
                        <van-icon :name="'cross'" />
                    </span>
                </div>
            </div>
        </div>
        <van-popup teleport="body" :overlay="true" :overlay-style="{ padding: '0', height: `${state.pickerClientHeight -40}px`, border: 'none'}" v-model:show="state.colorPickerShow" :style="{ padding: '0', margin: '0', width: `${360}px`, height: `${0}px`, overflow: 'visible',
            position: 'fixed',
            left: '50%',
            top:' 50%',
            transform: 'translate(-50%,-50%)',
        }" >
            <VantColorPickerWrapper
                v-show="state.colorPickerShow"
                :pickerClientWidth="state.pickerClientWidth"
                :pickerClientHeight="state.pickerClientHeight"
                :color="state.color"
                :showAlpha="state.showAlpha"
                :colorFormat="state.colorFormat"
                @wrapperDetermineChange="wrapperDetermineChange"
                @wrapperClose="handleWrapperClose"
                @wrapperChange="handleWrapperChange"
            ></VantColorPickerWrapper>
        </van-popup>        
    </div>
</template>
<script setup lang="ts">
import { ref, Ref, onMounted, reactive } from 'vue';
import VantColorPickerWrapper from './vant-color-picker-wrapper.vue';
import { vantColorPickerProps } from './vant-color-picker';

const props = defineProps(vantColorPickerProps);
const emit = defineEmits(['colorChange', 'activeChange']);

const colorPicker = ref<Ref | any>(null);

const state = reactive({
    color: "",
    styleColor: "#999",
    vanIconName: "cross",
    colorPickerShow: false,
    colorFormat: "rgb",
    showAlpha: false,
    pickerClientWidth: 0,
    pickerClientHeight: 0,
});

const openColorPicker = () => {
    if(props.color){
        state.color = props.color        
        state.styleColor = "#fff";
        state.vanIconName = 'arrow-down';
    }
    state.colorPickerShow = true;
};

const wrapperDetermineChange = (options: any, vanIconName: string)=> {
    state.color = options;
    state.vanIconName = vanIconName;
    state.styleColor = "#fff";
    state.colorPickerShow = !state.colorPickerShow;
    emit('colorChange', options);
};

const handleWrapperClose = (options: string)=> {
    if(options){        
        state.color = options;
        state.vanIconName = "arrow-down";
        state.styleColor = "#fff";
    }else{
        state.vanIconName = "cross";
        state.styleColor = "#999";
    }
    state.colorPickerShow = !state.colorPickerShow;
};

const handleWrapperChange = (color: string)=> {
    emit('activeChange', color);
};

function init(){    
    state.pickerClientWidth = document.body.clientWidth;
    state.pickerClientHeight = document.body.clientHeight;
    if(props.color){
        state.color = props.color        
        state.vanIconName = "arrow-down";
        state.styleColor = "#fff";
    }
    state.colorFormat = props.colorFormat ? props.colorFormat : '';
    state.showAlpha = props.showAlpha ? props.showAlpha : false;
};

onMounted(() => {
    init();
});

</script>

<style lang="less">
@import './style/vant-color-picker.less';
@import './style/vant-color-picker-wrapper.less';
</style>